<!-- 更新候选人简历 -->
<template>
  <div class="context_box">
    <div class="resume_top cenFlex">
      <div class="resume_top_l img">
        <img src="@/assets/img/index_icon8.png" alt />
      </div>
      <div class="resume_top_r">
        <div class="resume_top_r_t">姓名：{{resume.candidate || '--'}}</div>
        <div class="resume_top_r_b">联系电话：{{resume.phone || '--'}}</div>
      </div>
    </div>
    <div class="resume_middle">
      <div
        :class="i<=active?'resume_middle_in':'resume_middle_in_f'"
        v-for="(item,i) in steps"
        :key="i"
        v-if="(resume.state==1 && active >=i) || resume.state!=1"
      >
        <div class="resume_middle_in_radio cenFlex">
          <van-icon :name="i==active && resume.state==1?'warning':'checked'" size="26" color="#25B3D6" v-if="i<=active" />
          <div class="cenFlex" v-else>{{i+1}}</div>
        </div>
        <div class="resume_middle_in_content cenFlex" v-if="active !=i">
            <div>{{item.title}}</div>
            <div class="integral cenFlex">
                <div class="img cenFlex">
                    <img src="@/assets/img/index_icon13.png" alt="">
                </div>
                <div class="txt">{{item.integral}}分</div>
            </div>
        </div>
        <div class="resume_middle_in_content_now obox" v-else>
            <div class="resume_middle_in_content_now_title">{{item.title}}</div>
            <div class="resume_middle_in_content_now_bottom sbFlex">
                <div class="resume_middle_in_content_now_bottom_l cenFlex">
                    <div class="img">
                        <img src="@/assets/img/index_icon15.png" alt="">
                    </div>
                    <div class="txt">{{item.integral}}分</div>
                </div>
                <div class="resume_middle_in_content_now_bottom_r" v-if="resume.state==0">审核中</div>
                <div class="resume_middle_in_content_now_bottom_r" v-if="resume.state==1">未通过</div>
                <div class="resume_middle_in_content_now_bottom_r" v-if="resume.state==2">已通过</div>
                <div class="resume_middle_in_content_now_bottom_r_btn obox"  v-if="resume.state==3 && active>=2" @click="updateStep">更新进度</div>
            </div>
            <div class="resume_middle_in_content_now_errMsg" v-if="resume.state==1 && resume.errMsg">备注:{{resume.errMsg}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/api/resume.js";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      compareArr: [
        require("@/assets/img/index_icon28.png"),
        require("@/assets/img/index_icon29.png"),
      ],
      steps: [
        {
          title: "上传简历至Moka",
          integral: "5",
        },
        {
          title: "初筛(*仅限后台更新)",
          integral: "10",
        },
        {
          title: "初试",
          integral: "30",
        },
        {
          title: "复试",
          integral: "40",
        },
        {
          title: "offer",
          integral: "70",
        },
        {
          title: "入职",
          integral: "400",
        },
      ],
      active: -1,
      id:this.$route.query.id,
      resume:{},
      record:{}
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 初始请求的详情页面
    getInit(){
        api.resumeInfo(this.id).then(res=>{
          if(res.code == 0){
            this.resume = res.data.resume;
            this.record = res.data.record;
            this.active = res.data.resume.step
          }
        })
    },
    // 点击更新进度
    updateStep(){
      api.updateResume({id:Number(this.id)}).then(res=>{  
          if(res.code == 0){
            this.$router.replace("/nice-register-end?type=3");
          }
        })
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getInit();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
.resume_top {
  padding: 20px;
  .resume_top_l {
    width: 68px;
    height: 45px;
    min-width: 68px;
  }
  .resume_top_r {
    width: 100%;
    padding-left: 30px;
    .resume_top_r_t {
      margin-bottom: 10px;
    }
  }
}
.resume_middle {
  padding: 0px 20px;
  min-height: 70vh;
  .resume_middle_in,
  .resume_middle_in_f {
    display: flex;
    align-items: center;
    position: relative;
    padding-left: 50px;
    height: 80px;
    &::after {
      content: "";
      display: block;
      border-left: 1px dashed $niceblue;
      position: absolute;
      height: 55px;
      top: 53px;
      left: 12px;
    }
    &:nth-last-child(1) {
      &::after {
        content: "";
        display: block;
        border-left: 0px dashed $niceblue;
        position: absolute;
        height: 50px;
        top: 54px;
        left: 12px;
      }
    }
    .resume_middle_in_radio {
      position: absolute;
      left: -0px;
      width: 26px;
      height: 26px;
    }
  }
  .resume_middle_in_f {
    &::after {
      content: "";
      display: block;
      border-left: 1px dashed $nicegray;
      position: absolute;
      height: 55px;
      top: 54px;
      left: 12px;
    }
    &:nth-last-child(1) {
      &::after {
        content: "";
        display: block;
        border: 0px dashed $nicegray;
        position: absolute;
        height: 50px;
        top: 54px;
        left: 12px;
      }
    }
    .resume_middle_in_radio {
      position: absolute;
      left: -0px;
      border-radius: 50%;
      border: 1px solid $nicegray;
      width: 24px;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      background: #fff;
    }
  }
  .resume_middle_in_content{
      .integral{
          margin-left: 10px;
          .img{
              width: 18px;
              height: 18px;
              min-width: 18px;
              margin-right: 2px;
          }
      }
  }
  .resume_middle_in_content_now{
      background: $niceblue;
      width: 100%;
      height: 70px;
      padding: 10px 15px;
      color: #fff;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      position: relative;
      .resume_middle_in_content_now_bottom_l{
          .img{
              width: 18px;
          }
          .txt{
              margin-left: 5px;
          }
      }
      .resume_middle_in_content_now_bottom_r{
          font-size: 14px;
      }
      .resume_middle_in_content_now_bottom_r_btn{
        font-size: 14px;
        background: #fff;
        color: $niceblue;
        padding: 5px 10px;
      }
      .resume_middle_in_content_now_errMsg{
        position: absolute;
        bottom: 0px;
        transform: translateY(100%);
        // height: 20px;
        background: $niceblue;
        width: 100%;
        left: 0px;
        padding: 5px 15px;
        font-size: 14px;
        display: flex;
        line-height: 1.2;
        align-items: center;
        border-top: 1px #fff solid;
        border-radius: 0px 0px 5px 5px;
      }
  }
}
</style>